<template>
	<view>
		<!-- 主页面搜索框 -->
		<view class="homeSelectBox">
			<my-search @click="homeSelect"></my-search>
		</view>
		<!-- 轮播图区域 -->
		<view class="head">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				previous-margin="12px" next-margin="12px" easing-function="easeInOutCubic" duration="1000">
				<swiper-item v-for="(item, i) in swiperList" :key="i" @click="swiperClick(item)">
					<view class="swiper-item">
						<image :src="item.imgSrc"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav-list">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item,i) in navList" :key="i" @click="navClick(item)">
					<image :src="item.imgSrc" style="width: 50px; height: 50px;"></image>
					<text class="grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="bottom">
			<view v-for="(item,i) in showList" :key="i" @click="clickCard(item)" style="border-radius: 40rpx 40rpx 40rpx 40rpx;">
				<uni-card :isShadow="true" :title="item.purposeLocation" mode="basic" style="margin-bottom: 10px;">
					<view>
						<view style="height: 350rpx;">
							<image style="height: 100%; width: 100%;" mode="aspectFill"
								:src="item.activityImagePath.imgSrc" />
						</view>
						<view class="content-box" style="padding: 10px; line-height: 25px;">
							<text style="font-size: 15px;" class="u-line-1">{{ item.activityName }}</text>
							<text style="font-size: 12px;" class="u-line-2">{{ item.description }}</text>
							<view style="color: red; font-size: 14px;">
								{{ item.price }} ￥/人
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<u-loadmore loadmoreText="实在没有了" color="#d8d8d8" lineColor="#d8d8d8" dashed line />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				//轮播图数据列表
				swiperList: [],
				// 导航数据列表
				navList: [],
				//展示列表
				showList: [],
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};
		},
		onLoad() {
			//轮播图数据
			this.getSwiperList()
			this.getNavList()
			this.getshowList()
		},
		computed: {
			...mapState('m_user', ['userInfo', 'token'])
		},
		methods: {
			async getSwiperList() {
				//轮播图请求路径 路径后面需要更改成我们的路径
				const {
					data: res
				} = await uni.$u.http.get("/user/homepage/getHomepage", {
					custom: {
						auth: true
					}
				})
				this.swiperList = res.data.bannerList
			},
			swiperClick(item) {
				
				let id = item.id
				uni.navigateTo({
					url: '/subpkg/detailLine/detailLine?activityId=' + id
				})
			},
			async getNavList() {
				//导航请求路径 路径后面需要更改成我们的路径
				const {
					data: res
				} = await uni.$u.http.get("/user/homepage/getHomepage", {
					custom: {
						auth: true
					}
				})
				this.navList = res.data.navList

			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			navClick(item) {
				let navName = item.name
				uni.navigateTo({
					url: '/subpkg/search/search?navName=' + navName
				})
			},
			async getshowList() {
				const {
					data: res
				} = await uni.$u.http.post("/user/activity/list", {
					custom: {
						auth: true
					}
				})
				this.showList = res.data
			},
			homeSelect() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},

			clickCard(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/subpkg/detailLine/detailLine?activityId=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {

		.swiper-item,
		image {
			border-radius: 20px 20px 20px 20px;
			border: 1px solid #ffffff;
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		padding-top: 10px;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.bottom {
		padding: 1px;
	}

	.homeSelectBox {
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>